/**
 * Created by Dalyn on 2017/5/8.
 */
import React from "react";
import Relay from "react-relay";
import {Link} from 'react-router';
import GetProcessDemand from '../mutation/ProcessDemandMutation/GetProcessDemand'  //读取图片
import '../css/processDemand.css'

import{Upload,Alert} from 'antd'  //上传附件

import {message,Modal,Spin} from 'antd';
import {ViewImgList} from '../components/PackStep_Header'
import {_Button,_Input} from "ANT_DE";
import Config from "../../../../util/Config"
const Button  = _Button,
       Input = _Input;

function ListItem(props){
    const {imgSrc,imgName,text} = props;
    return(
        <div className="poduction_manage_look">
            <div className="poduction_manage_look_img">
                <a href={imgSrc} target="_blank">
                    <img src={imgSrc} title={imgName} style={{width:"100%",height:"100%"}} alt={imgName} />
                </a>
                <span className="poduction_manage_look_imgDes">
                    { text }
                </span>
            </div>
        </div>
    )
}

/*导出组件*/
export default class ProcessDemand extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            fileList:[],
            imgList:[],
            text:"",
            isPreview:false,
            previewImg:{curImgSrc:"",curImgName:""},
            isLoading:true
        };
        this.FixedImgSrc = Config.qiuniu;
        this.pdId = this.props.pdId;
        this.processDemandId = "";

        this.cancelPreview = this.cancelPreview.bind(this);
        this.handlePreview = this.handlePreview.bind(this);
    }

    //asds
    componentDidMount(){
        // 获得上次保存的数据
        Relay.Store.commitUpdate(new GetProcessDemand({
                pdId:this.pdId
            }),{
                onSuccess:(res)=>{
                    let data = res.getProcessDemand.getProcessDemand;
                    this.setState({isLoading:false,});
                    // 如果没有其数据，直接reeturn
                    if(data.processDemand == null){return};

                    if(data.errorCode == 0){
                        let  com_file = JSON.parse(data.processDemand.fileJson),
                            con_img = JSON.parse(data.processDemand.imgJson),
                            text = data.processDemand.careContent;

                        this.setState({
                            imgList:con_img,
                            fileList:com_file,
                            text:text
                        });

                        this.processDemandId = data.processDemandId
                    }
                },
                onFailure:()=>{
                    message.error("拉取数据失败，请检查网络连接")
                }
            }
        );
    }

    handlePreview(index){
        this.setState({
            isPreview:true,
            previewImg: {
                curImgSrc: this.FixedImgSrc + this.state.fileList[index].file.response.key,
                curImgName: this.state.fileList[index].file.name
            }
        })
    }

    cancelPreview(){
        this.setState({
            isPreview:false
        })
    }


    handlePreview(index) {
        this.setState({
            isPreview:true,
            previewImg: {
                curImgSrc: this.FixedImgSrc + this.state.imgList[index].file.response.key,
                curImgName: this.state.imgList[index].file.name
            }
        })
    }

    render(){
        const {fileList,isPreview,previewImg,imgList,text,isLoading} = this.state,
        {}  = this.props;

        return (
            <div className="process_demandlook" >
                <Spin
                    tip="加载中"
                    spinning={isLoading}
                >
                    <div className="poduction_manage_look_con">
                        {
                            text &&
                            <div>
                                <p className="poduction_manage_look_describe">
                                    {text}
                                </p>
                            </div>
                        }
                        {
                            imgList.length !==0 &&
                            <div className="poduction_manage_look_clear production_look_pic">
                                {
                                    imgList.map((item,index)=>
                                        <ViewImgList
                                            key={`img${index}`}
                                            imgSrc={this.FixedImgSrc + item.file.response.key}
                                            imgName={item.file.name}
                                            handlePreview={(e)=>this.handlePreview(index)}
                                            textValue={item.text}
                                        />
                                    )
                                }
                            </div>
                        }


                        {/*上传文件*/}
                        {
                            fileList.length !==0  &&
                            <div>
                                <Upload
                                    key="fileList"
                                    listType="text"
                                    className="poduction_techRequ_updataFile"
                                    fileList={fileList}
                                />
                            </div>
                        }
                    </div>
                </Spin>

                {
                    !text && imgList.length === 0 && fileList.length === 0 &&
                    <p className="production_look_empty">
                        <i>  </i>
                        <span>暂无数据</span>
                    </p>
                }


                <Modal
                    className="production_preview"
                    visible={isPreview}
                    width={800}
                    footer={null}
                    onCancel={this.cancelPreview}
                >
                    <img src={previewImg.curImgSrc} style={{ width: '100%' }} alt={previewImg.curImgName}/>
                </Modal>
            </div>
        )
    }
}